<template>
    <div class="reservation-container">
    <!-- 顶部标签导航 -->
    <div class="tab-section">
      <el-tabs v-model="activeTab" @tab-click="handleTabClick">
        <el-tab-pane label="待处理" name="need_process">
          <span slot="label">
            待处理
            <!-- <el-badge :value="stats.needProcess" v-if="stats.needProcess > 0" class="tab-badge"></el-badge> -->
          </span>
        </el-tab-pane>
        <el-tab-pane label="待支付" name="pending">
          <span slot="label">
            待支付
            <!-- <el-badge :value="stats.pending" v-if="stats.pending > 0" class="tab-badge"></el-badge> -->
          </span>
        </el-tab-pane>
        <el-tab-pane label="今日入住" name="today_checkin">
          <span slot="label">
            今日入住
            <!-- <el-badge :value="getTodayCheckinCount()" v-if="getTodayCheckinCount() > 0" class="tab-badge"></el-badge> -->
          </span>
        </el-tab-pane>
        <el-tab-pane label="将入住" name="upcoming">
          <span slot="label">
            将入住
            <!-- <el-badge :value="stats.upcoming" v-if="stats.upcoming > 0" class="tab-badge"></el-badge> -->
          </span>
        </el-tab-pane>
        <el-tab-pane label="已入住" name="checked_in">
          <span slot="label">
            已入住
            <!-- <el-badge :value="stats.checkedIn" v-if="stats.checkedIn > 0" class="tab-badge"></el-badge> -->
          </span>
        </el-tab-pane>
        <el-tab-pane label="待退房" name="need_checkout">待退房</el-tab-pane>
        <el-tab-pane label="已完成" name="completed">已完成</el-tab-pane>
        <el-tab-pane label="退款相关" name="refund_related">
          <span slot="label">
            退款相关
            <!-- <el-badge :value="stats.refunding + stats.refunded" v-if="(stats.refunding + stats.refunded) > 0" class="tab-badge"></el-badge> -->
          </span>
        </el-tab-pane>
        <el-tab-pane label="异常订单" name="abnormal">
          <span slot="label">
            异常订单
            <!-- <el-badge :value="stats.abnormal + stats.expired" v-if="(stats.abnormal + stats.expired) > 0" class="tab-badge"></el-badge> -->
          </span>
        </el-tab-pane>
        <el-tab-pane label="全部订单" name="all">全部订单</el-tab-pane>
      </el-tabs>
    </div>

    <!-- 搜索筛选 -->
    <div class="search-section">
      <el-row :gutter="15">
          <el-col :span="6">
            <el-input
              v-model="searchForm.keyword"
            placeholder="客人姓名或订单号(5位)"
            clearable
            prefix-icon="el-icon-search">
            </el-input>
          </el-col>
        <el-col :span="8">
          <el-button-group>
            <el-button 
              :type="dateFilter === 'all' ? 'primary' : 'default'"
              @click="setDateFilter('all')">
              全部日期
            </el-button>
            <el-button 
              :type="dateFilter === 'today' ? 'primary' : 'default'"
              @click="setDateFilter('today')">
              今日
            </el-button>
            <el-button 
              :type="dateFilter === 'tomorrow' ? 'primary' : 'default'"
              @click="setDateFilter('tomorrow')">
              明日
            </el-button>
            <el-button 
              :type="dateFilter === 'week' ? 'primary' : 'default'"
              @click="setDateFilter('week')">
              未来7天
            </el-button>
          </el-button-group>
        </el-col>
        <el-col :span="6">
          <el-select v-model="searchForm.sortBy" placeholder="排序" style="width: 100%;">
            <el-option label="入住日期升序" value="check_in_asc"></el-option>
            <el-option label="预订者姓名" value="name_asc"></el-option>
            <el-option label="下单时间降序" value="create_desc"></el-option>
          </el-select>
        </el-col>
          <el-col :span="4">
          <el-dropdown trigger="click">
            <el-button type="primary">
              操作 <i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="printOrders">打印</el-dropdown-item>
              <!-- <el-dropdown-item @click.native="exportOrders">酒店确认号</el-dropdown-item> -->
              <el-dropdown-item @click.native="showRefundList">退款管理</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          </el-col>
        </el-row>
      </div>
  
    <!-- 主要内容区域 -->
    <div class="main-content">
      <el-row :gutter="20">
        <!-- 左侧订单列表 -->
        <el-col :span="8">
          <div class="order-list-section">
            <div class="order-filter">
              <span class="filter-title">条件筛选:</span>
              <el-select v-model="searchForm.roomType" placeholder="房型" size="mini" clearable>
                <el-option label="全部房型" value=""></el-option>
                <el-option v-for="type in roomTypes" :key="type" :label="type" :value="type"></el-option>
              </el-select>
            </div>

            <!-- 订单列表 - 增加固定高度和滚动 -->
            <div 
              class="order-list" 
              v-loading="loading"
              ref="orderListContainer"
              @scroll="handleScroll">
              
              <!-- 列表信息头 -->
              <div class="list-header">
                <div class="list-stats">
                  <span class="count">共 {{ pagination.total }} 条</span>
                  <span class="current">已显示 {{ orderList.length }} 条</span>
                </div>
                <div class="list-actions">
                  <el-button 
                    type="text" 
                    size="mini" 
                    icon="el-icon-refresh" 
                    @click="refreshOrders">
                    刷新
                  </el-button>
                </div>
              </div>

              <!-- 订单项列表 -->
              <div 
                v-for="order in orderList" 
                :key="order.id"
                class="order-item"
                :class="{ 'active': selectedOrder && selectedOrder.id === order.id }"
                @click="selectOrder(order)">
                
                <div class="order-header">
                  <div class="order-status">
                    <el-tag 
                      :type="getStatusType(order.status)" 
                      size="mini">
                      {{ order.order_sn }}
                    </el-tag>
                    <span class="order-time" v-if="formatTime(order.create_time)">{{ formatTime(order.create_time) }}</span>
                    <el-tag 
                      v-if="order.status === 1"
                      type="success" 
                      size="mini">
                      已支付
                    </el-tag>
                  </div>
                </div>

                <div class="order-content">
                  <div class="room-info">
                    <span class="room-count" style="color: #ffff;">1间</span>
                    <span class="room-name">{{ order.room_title }}</span>
                  </div>
                  <div class="date-info">
                    {{ order.booking_date_start }} - {{ order.booking_date_end }}
                  </div>
                  <div class="guest-info">
                    {{ order.name }}
                  </div>
                </div>

                <div class="order-actions">
                  <div class="order-price">
                    <span class="currency">￥</span>
                    <span class="amount">{{ order.price }}</span>
                  </div>
                  <div class="quick-actions">
                    <el-tag 
                      v-if="order.discount < 10"
                      type="warning" 
                      size="mini">
                      {{ order.discount }}折
                    </el-tag>
                    <el-tag 
                      v-if="order.verify_code"
                      type="success" 
                      size="mini">
                      已生成核销码
                    </el-tag>
                  </div>
                </div>
              </div>

              <!-- 加载更多提示 -->
              <div v-if="hasMore && !loading" class="load-more-trigger" ref="loadMoreTrigger">
                <el-button 
                  type="text" 
                  size="small" 
                  @click="loadMoreOrders"
                  :loading="loadingMore">
                  <i class="el-icon-download"></i> 加载更多订单
                </el-button>
              </div>

              <!-- 加载中提示 -->
              <div v-if="loadingMore" class="loading-more">
                <i class="el-icon-loading"></i> 正在加载更多...
              </div>

              <!-- 没有更多数据提示 -->
              <div v-if="!hasMore && orderList.length > 0" class="no-more">
                <span>已显示全部订单</span>
              </div>

              <!-- 空状态 -->
              <div v-if="orderList.length === 0 && !loading" class="empty-state">
                <i class="el-icon-document"></i>
                <p>暂无订单数据</p>
                <el-button type="primary" size="small" @click="refreshOrders">重新加载</el-button>
              </div>
            </div>
          </div>
        </el-col>

        <!-- 右侧订单详情 -->
        <el-col :span="16">
          <div class="order-detail-section" v-if="selectedOrder">
            <!-- 订单详情头部 -->
            <div class="detail-header">
              <h3>{{ selectedOrder.order_sn }}</h3>
              <div class="header-tags">
                <el-tag :type="getStatusType(selectedOrder.status)">{{ getStatusText(selectedOrder.status, selectedOrder.review_status) }}</el-tag>
                <!-- 评价状态标签 -->
                <el-tag 
                  v-if="[3, 6].includes(selectedOrder.status)" 
                  :type="selectedOrder.review_status === 1 ? 'success' : 'warning'" 
                  size="small" 
                  style="margin-left: 8px;">
                  {{ getReviewStatusText(selectedOrder.review_status) }}
                </el-tag>
                <el-tag type="success" v-if="formatDateTime(selectedOrder.create_time)">{{ formatDateTime(selectedOrder.create_time) }}</el-tag>
                <el-button type="text" icon="el-icon-edit-outline"></el-button>
              </div>
            </div>

            <!-- 客人信息 -->
            <el-card class="info-card">
              <div slot="header">
                <span>客人信息</span>
              </div>
              <el-row :gutter="20">
                <el-col :span="12">
                  <div class="info-item">
                    <span class="label">姓名:</span>
                    <span class="value">{{ selectedOrder.name }}</span>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="info-item">
                    <span class="label">身份证:</span>
                    <span class="value">{{ selectedOrder.idCard || '未填写' }}</span>
                  </div>
                </el-col>
              </el-row>
              <div class="contact-info">
                <i class="el-icon-phone"></i>
                {{ selectedOrder.phone }}
                <i class="el-icon-message"></i>
                <span class="contact-tip">联系客人</span>
              </div>
            </el-card>

            <!-- 房间信息 -->
            <el-card class="info-card">
              <div slot="header">
                <span>房间清单</span>
              </div>
              <div class="room-detail">
                <div class="room-row">
                  <span class="room-name">{{ selectedOrder.room_title }}，房间ID: {{ selectedOrder.room_id }}</span>
                  <span class="room-count" style="color: #ffff;">1间</span>
                </div>
              </div>
            </el-card>

            <!-- 住宿日期 -->
            <el-card class="info-card">
              <div slot="header">
                <span>住宿日期</span>
              </div>
              <el-row :gutter="20">
                <el-col :span="12">
                  <div class="date-info">
                    <div class="date-label">入住</div>
                    <div class="date-value">{{ selectedOrder.booking_date_start }}</div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="date-info">
                    <div class="date-label">天数</div>
                    <div class="date-value">{{ calculateNights(selectedOrder.booking_date_start, selectedOrder.booking_date_end) }}晚</div>
                  </div>
                </el-col>
              </el-row>
              <div class="checkout-info">
                <span class="label">预计到店时间:</span>
                <span class="value">{{ selectedOrder.booking_date_start }} 12:00 - {{ selectedOrder.booking_date_end }} 06:00</span>
              </div>
            </el-card>

            <!-- 核销信息 -->
            <el-card class="info-card" v-if="selectedOrder.verify_code">
              <div slot="header">
                <span>核销信息</span>
              </div>
              <div class="verify-info">
                <div class="info-item">
                  <span class="label">核销码:</span>
                  <span class="value">{{ selectedOrder.verify_code }}</span>
                </div>
                <div class="info-item" v-if="selectedOrder.verify_time">
                  <span class="label">核销时间:</span>
                  <span class="value">{{ selectedOrder.verify_time }}</span>
                </div>
              </div>
            </el-card>

            <!-- 房价明细 -->
            <el-card class="info-card">
              <div slot="header">
                <span>房价明细 (CNY)</span>
                <el-tag type="warning" size="mini" v-if="selectedOrder.status >= 1">已支付</el-tag>
              </div>
              <div class="price-detail">
                <div class="price-row">
                  <span class="label">原价:</span>
                  <span class="value">￥{{ selectedOrder.original_price }}</span>
                </div>
                <div class="price-row">
                  <span class="label">折扣:</span>
                  <span class="value">{{ selectedOrder.discount }}折</span>
                </div>
                <div class="total-price">
                  <span class="amount">￥{{ selectedOrder.price }}</span>
                </div>
                <div class="price-note" v-if="selectedOrder.pay_time && formatDateTime(selectedOrder.pay_time)">
                  支付时间: {{ formatDateTime(selectedOrder.pay_time) }}
                </div>
              </div>
            </el-card>

            <!-- 操作按钮 -->
            <div class="action-buttons">
              <!-- 待支付状态 -->
              <el-button 
                v-if="selectedOrder.status === 0"
                type="primary" 
                @click="confirmOrder(selectedOrder)">
                确认支付
              </el-button>
              
              <!-- 待确认状态 -->
              <el-button 
                v-if="selectedOrder.status === 9"
                type="primary" 
                @click="confirmOrder(selectedOrder)">
                确认订单
              </el-button>
              
              <!-- 已支付状态 - 办理入住 -->
              <el-button 
                v-if="selectedOrder.status === 1"
                type="success" 
                @click="checkIn(selectedOrder)">
                办理入住
              </el-button>
              
              <!-- 已入住状态 - 办理退房 -->
              <el-button 
                v-if="selectedOrder.status === 2"
                type="warning" 
                @click="updateOrderStatus(selectedOrder, 5)">
                标记待退房
              </el-button>
              
              <!-- 待退房状态 - 办理退房 -->
              <el-button 
                v-if="selectedOrder.status === 5"
                type="success" 
                @click="checkOut(selectedOrder)">
                办理退房
              </el-button>
              
              <!-- 异常订单处理 -->
              <el-button 
                v-if="selectedOrder.status === 10"
                type="warning" 
                @click="handleAbnormalOrder(selectedOrder)">
                处理异常
              </el-button>
              
              <!-- 过期订单处理 -->
              <el-button 
                v-if="selectedOrder.status === 7"
                type="info" 
                @click="handleExpiredOrder(selectedOrder)">
                处理过期订单
              </el-button>
              
              <!-- 退款申请 - 仅已支付后的订单可退款 -->
              <el-button 
                v-if="[1, 2].includes(selectedOrder.status)"
                type="danger" 
                @click="cancelOrder(selectedOrder)">
                申请退款
              </el-button>
              
              <!-- 取消订单 -->
              <el-button 
                v-if="[0, 9].includes(selectedOrder.status)"
                type="info" 
                @click="updateOrderStatus(selectedOrder, 8)">
                取消订单
              </el-button>
              
              <!-- 查看二维码 -->
              <el-button 
                v-if="selectedOrder.verify_code_img"
                type="info"
                @click="showQrCode(selectedOrder)">
                查看二维码
              </el-button>
              
              <!-- 评价相关按钮 -->
              <el-button 
                v-if="canReview(selectedOrder)"
                type="primary" 
                @click="showReviewDialog(selectedOrder)">
                立即评价
              </el-button>
              
              <el-button 
                v-if="canViewReview(selectedOrder)"
                type="info" 
                @click="viewReview(selectedOrder)">
                查看评价
              </el-button>
              
              <!-- 完成订单 - 待评价状态且已评价后可完成 -->
              <el-button 
                v-if="selectedOrder.status === 3 && selectedOrder.review_status === 1"
                type="success" 
                @click="updateOrderStatus(selectedOrder, 4)">
                完成订单
              </el-button>
            </div>
        </div>
        
          <!-- 空状态 -->
          <div v-else class="empty-detail">
            <i class="el-icon-document"></i>
            <p>请在左侧选择一个订单查看详情</p>
        </div>
        </el-col>
      </el-row>
    </div>

    <!-- 退款申请对话框 -->
    <el-dialog
      title="申请退款"
      :visible.sync="refundDialogVisible"
      width="600px"
      :close-on-click-modal="false">
      
      <el-form ref="refundForm" :model="refundForm" :rules="refundRules" label-width="100px">
        <el-form-item label="订单信息">
          <div class="order-info">
            <p><strong>订单号：</strong>{{ refundForm.orderInfo.order_sn }}</p>
            <p><strong>房间：</strong>{{ refundForm.orderInfo.room_title }}</p>
            <p><strong>入住日期：</strong>{{ refundForm.orderInfo.booking_date_start }} - {{ refundForm.orderInfo.booking_date_end }}</p>
            <p><strong>订单金额：</strong>￥{{ refundForm.orderInfo.price }}</p>
    </div>
        </el-form-item>
        
        <el-form-item label="退款金额" prop="refund_amount">
          <el-input-number
            v-model="refundForm.refund_amount"
            :min="0.01"
            :max="parseFloat(refundForm.orderInfo.price || 0)"
            :precision="2"
            :step="1"
            style="width: 200px;">
          </el-input-number>
          <span class="input-suffix">元（最高可退 ￥{{ refundForm.orderInfo.price }}）</span>
        </el-form-item>
        
        <el-form-item label="退款类型" prop="refund_type">
          <el-radio-group v-model="refundForm.refund_type">
            <el-radio :label="1">仅退款</el-radio>
            <el-radio :label="2">退款退货</el-radio>
          </el-radio-group>
        </el-form-item>
        
        <el-form-item label="退款原因" prop="refund_reason">
          <el-select v-model="refundForm.refund_reason" placeholder="请选择退款原因" style="width: 100%;">
            <el-option label="临时有事，无法入住" value="临时有事，无法入住"></el-option>
            <el-option label="行程变更" value="行程变更"></el-option>
            <el-option label="房间与描述不符" value="房间与描述不符"></el-option>
            <el-option label="服务质量问题" value="服务质量问题"></el-option>
            <el-option label="设施设备问题" value="设施设备问题"></el-option>
            <el-option label="其他原因" value="其他原因"></el-option>
          </el-select>
        </el-form-item>
        
        <el-form-item label="详细说明">
          <el-input
            v-model="refundForm.refund_detail"
            type="textarea"
            :rows="3"
            placeholder="请详细说明退款原因（可选）"
            maxlength="200"
            show-word-limit>
          </el-input>
        </el-form-item>
      </el-form>
      
      <div slot="footer" class="dialog-footer">
        <el-button @click="refundDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitRefund" :loading="refundSubmitting">确认申请</el-button>
      </div>
    </el-dialog>

    <!-- 退款列表对话框 -->
    <el-dialog
      title="退款记录"
      :visible.sync="refundListDialogVisible"
      width="80%"
      :close-on-click-modal="false">
      
      <div class="refund-list-header">
        <el-row :gutter="15">
          <el-col :span="6">
            <el-input
              v-model="refundSearchForm.keyword"
              placeholder="订单号/客户姓名"
              clearable
              prefix-icon="el-icon-search">
            </el-input>
          </el-col>
          <el-col :span="4">
            <el-select v-model="refundSearchForm.status" placeholder="退款状态" clearable>
              <el-option label="全部状态" value=""></el-option>
              <el-option label="待审核" value="0"></el-option>
              <el-option label="已同意" value="1"></el-option>
              <el-option label="已拒绝" value="-1"></el-option>
              <el-option label="退款完成" value="3"></el-option>
            </el-select>
          </el-col>
          <el-col :span="6">
            <el-date-picker
              v-model="refundDateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="handleRefundDateChange"
              style="width: 100%;">
            </el-date-picker>
          </el-col>
          <el-col :span="4">
            <el-button type="primary" @click="loadRefundList">搜索</el-button>
          </el-col>
        </el-row>
      </div>

      <el-table :data="refundList" v-loading="refundListLoading" style="margin-top: 15px;">
        <el-table-column prop="refund_sn" label="退款单号" width="150"></el-table-column>
        <el-table-column prop="order_sn" label="订单号" width="130"></el-table-column>
        <el-table-column prop="name" label="客户姓名" width="100"></el-table-column>
        <el-table-column prop="title" label="房间" min-width="120"></el-table-column>
        <el-table-column prop="refund_amount" label="退款金额" width="100">
          <template slot-scope="scope">
            <span class="amount-text">￥{{ scope.row.refund_amount }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="status_text" label="状态" width="80">
          <template slot-scope="scope">
            <el-tag :type="getRefundStatusType(scope.row.status)" size="mini">
              {{ scope.row.status_text }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="apply_time" label="申请时间" width="150"></el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <!-- <el-button type="text" @click="viewRefundDetail(scope.row)">查看</el-button> -->
            <el-button  v-if="scope.row.status !== -2"
              type="text" 
              @click="processRefundDialog(scope.row)">
              处理
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-wrapper">
        <el-pagination
          @size-change="handleRefundSizeChange"
          @current-change="handleRefundCurrentChange"
          :current-page="refundPagination.page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="refundPagination.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="refundPagination.total">
        </el-pagination>
      </div>
    </el-dialog>

    <!-- 退款详情对话框 -->
    <el-dialog
      title="退款详情"
      :visible.sync="refundDetailDialogVisible"
      width="700px">
      
      <div v-if="refundDetailData" class="refund-detail">
        <el-descriptions title="退款信息" :column="2" border>
          <el-descriptions-item label="退款单号">{{ refundDetailData.refund_sn }}</el-descriptions-item>
          <el-descriptions-item label="订单号">{{ refundDetailData.order_sn }}</el-descriptions-item>
          <el-descriptions-item label="客户姓名">{{ refundDetailData.name }}</el-descriptions-item>
          <el-descriptions-item label="联系电话">{{ refundDetailData.phone }}</el-descriptions-item>
          <el-descriptions-item label="房间">{{ refundDetailData.room_title }}</el-descriptions-item>
          <el-descriptions-item label="入住日期">{{ refundDetailData.booking_date_start }} - {{ refundDetailData.booking_date_end }}</el-descriptions-item>
          <el-descriptions-item label="订单金额">￥{{ refundDetailData.order_amount }}</el-descriptions-item>
          <el-descriptions-item label="退款金额">￥{{ refundDetailData.refund_amount }}</el-descriptions-item>
          <el-descriptions-item label="退款原因" :span="2">{{ refundDetailData.refund_reason }}</el-descriptions-item>
          <el-descriptions-item label="退款状态">
            <el-tag :type="getRefundStatusType(refundDetailData.status)">
              {{ refundDetailData.status_text }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="申请时间">{{ refundDetailData.apply_time }}</el-descriptions-item>
        </el-descriptions>

        <div v-if="refundDetailData.logs && refundDetailData.logs.length > 0" style="margin-top: 20px;">
          <h4>处理记录</h4>
          <el-timeline>
            <el-timeline-item
              v-for="log in refundDetailData.logs"
              :key="log.id"
              :timestamp="log.create_time">
              <p><strong>{{ log.action }}</strong></p>
              <p v-if="log.remark">{{ log.remark }}</p>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
    </el-dialog>

    <!-- 处理退款对话框 -->
    <el-dialog
      title="处理退款申请"
      :visible.sync="processRefundDialogVisible"
      width="500px">
      
      <el-form ref="processForm" :model="processForm" :rules="processRules" label-width="100px">
        <el-form-item label="退款单号">
          <span>{{ processForm.refund_sn }}</span>
        </el-form-item>
        <el-form-item label="退款金额">
          <span class="amount-text">￥{{ processForm.refund_amount }}</span>
        </el-form-item>
        <el-form-item label="处理结果" prop="status">
          <el-radio-group v-model="processForm.status">
            <el-radio :label="1">同意退款</el-radio>
            <el-radio :label="-1">拒绝退款</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="处理备注" prop="remark">
          <el-input
            v-model="processForm.remark"
            type="textarea"
            :rows="3"
            :placeholder="processForm.status === 1 ? '同意退款的备注（可选）' : '拒绝退款的原因（必填）'"
            maxlength="200"
            show-word-limit>
          </el-input>
        </el-form-item>
      </el-form>
      
      <div slot="footer" class="dialog-footer">
        <el-button @click="processRefundDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitProcessRefund" :loading="processSubmitting">确认处理</el-button>
      </div>
    </el-dialog>

    <!-- 评价对话框 -->
    <el-dialog
      title="订单评价"
      :visible.sync="reviewDialogVisible"
      width="600px"
      :close-on-click-modal="false">
      
      <el-form ref="reviewForm" :model="reviewForm" :rules="reviewRules" label-width="100px">
        <el-form-item label="订单信息">
          <div class="order-info">
            <p><strong>订单号：</strong>{{ reviewForm.orderInfo.order_sn }}</p>
            <p><strong>房间：</strong>{{ reviewForm.orderInfo.room_title }}</p>
            <p><strong>入住日期：</strong>{{ reviewForm.orderInfo.booking_date_start }} - {{ reviewForm.orderInfo.booking_date_end }}</p>
          </div>
        </el-form-item>
        
        <el-form-item label="整体评分" prop="rating">
          <el-rate
            v-model="reviewForm.rating"
            :max="5"
            :colors="['#F7BA2A', '#F7BA2A', '#F7BA2A']"
            :icon-classes="['icon', 'icon', 'icon']"
            void-icon-class="icon"
            show-text
            :texts="['很差', '较差', '一般', '满意', '非常满意']">
          </el-rate>
        </el-form-item>
        
        <el-form-item label="环境评分">
          <el-rate v-model="reviewForm.environment_rating" :max="5"></el-rate>
        </el-form-item>
        
        <el-form-item label="服务评分">
          <el-rate v-model="reviewForm.service_rating" :max="5"></el-rate>
        </el-form-item>
        
        <el-form-item label="性价比评分">
          <el-rate v-model="reviewForm.value_rating" :max="5"></el-rate>
        </el-form-item>
        
        <el-form-item label="评价内容" prop="content">
          <el-input
            v-model="reviewForm.content"
            type="textarea"
            :rows="4"
            placeholder="请分享您的入住体验..."
            maxlength="500"
            show-word-limit>
          </el-input>
        </el-form-item>
        
        <el-form-item label="评价标签">
          <el-checkbox-group v-model="reviewForm.tags">
            <el-checkbox label="环境优美">环境优美</el-checkbox>
            <el-checkbox label="服务周到">服务周到</el-checkbox>
            <el-checkbox label="设施完善">设施完善</el-checkbox>
            <el-checkbox label="交通便利">交通便利</el-checkbox>
            <el-checkbox label="性价比高">性价比高</el-checkbox>
            <el-checkbox label="房间干净">房间干净</el-checkbox>
            <el-checkbox label="位置优越">位置优越</el-checkbox>
            <el-checkbox label="值得推荐">值得推荐</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        
        <el-form-item label="是否匿名">
          <el-switch v-model="reviewForm.is_anonymous"></el-switch>
          <span style="margin-left: 10px; color: #909399; font-size: 12px;">开启后将匿名显示</span>
        </el-form-item>
      </el-form>
      
      <div slot="footer" class="dialog-footer">
        <el-button @click="reviewDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitReview" :loading="reviewSubmitting">提交评价</el-button>
      </div>
    </el-dialog>

    <!-- 查看评价对话框 -->
    <el-dialog
      title="评价详情"
      :visible.sync="viewReviewDialogVisible"
      width="600px">
      
      <div v-if="reviewDetailData" class="review-detail">
        <div class="review-header">
          <div class="rating-section">
            <div class="overall-rating">
              <span class="rating-score">{{ reviewDetailData.rating }}</span>
              <el-rate
                v-model="reviewDetailData.rating"
                disabled
                :max="5"
                style="margin-left: 10px;">
              </el-rate>
            </div>
            <div class="sub-ratings">
              <div class="rating-item">
                <span>环境：</span>
                <el-rate v-model="reviewDetailData.environment_rating" disabled :max="5" size="small"></el-rate>
              </div>
              <div class="rating-item">
                <span>服务：</span>
                <el-rate v-model="reviewDetailData.service_rating" disabled :max="5" size="small"></el-rate>
              </div>
              <div class="rating-item">
                <span>性价比：</span>
                <el-rate v-model="reviewDetailData.value_rating" disabled :max="5" size="small"></el-rate>
              </div>
            </div>
          </div>
        </div>
        
        <div class="review-content">
          <h4>评价内容</h4>
          <p>{{ reviewDetailData.content || '暂无评价内容' }}</p>
        </div>
        
        <div v-if="reviewDetailData.tags && reviewDetailData.tags.length > 0" class="review-tags">
          <h4>评价标签</h4>
          <el-tag
            v-for="tag in reviewDetailData.tags"
            :key="tag"
            size="small"
            style="margin-right: 8px; margin-bottom: 8px;">
            {{ tag }}
          </el-tag>
        </div>
        
        <div class="review-meta">
          <p><strong>评价时间：</strong>{{ reviewDetailData.review_time }}</p>
          <p><strong>评价人：</strong>{{ reviewDetailData.is_anonymous ? '匿名用户' : reviewDetailData.user_name }}</p>
        </div>
      </div>
    </el-dialog>
    </div>
  </template>
  
  <script>
  import { orderList, updateOrderStatus, cancelOrder, applyRefund, refundList, refundDetail, processRefund } from '@/api/mings'
  
  export default {
    name: 'ReservationOrder',
    data() {
      return {
        loading: false,
        activeTab: 'all', // 默认选中全部订单
        selectedOrder: null,
        dateFilter: 'all',
        
        // 搜索表单
        searchForm: {
          keyword: '',
          sortBy: 'check_in_asc',
          roomType: ''
        },
        
        // 订单列表
        orderList: [],
        roomTypes: [],
        
        // 分页
        pagination: {
          page: 1,
          limit: 20,
          total: 0
        },

        // 无限滚动相关
        loadingMore: false,  // 是否正在加载更多
        hasMore: true,       // 是否还有更多数据
        scrollThreshold: 100, // 滚动触发阈值（距离底部的像素）
        
        // 统计数据
        stats: {
          total: 0,          // 总订单数
          pending: 0,        // 待支付
          confirmed: 0,      // 已支付
          upcoming: 0,       // 即将入住（今明两天）
          checkedIn: 0,      // 已入住（包含待退房）
          completed: 0,      // 已完成（已退房）
          refunding: 0,      // 退款中
          refunded: 0,       // 已退款
          cancelled: 0,      // 已取消
          expired: 0,        // 已过期
          abnormal: 0,       // 异常订单
          needProcess: 0     // 需要处理的订单
        },
        
        // 商户ID
        merId: this.$store.getters.merId || 1,
        
        // ========== 退款相关数据 ==========
        
        // 退款申请对话框
        refundDialogVisible: false,
        refundSubmitting: false,
        refundForm: {
          orderInfo: {},
          refund_amount: 0,
          refund_type: 1,
          refund_reason: '',
          refund_detail: ''
        },
        refundRules: {
          refund_amount: [
            { required: true, message: '请输入退款金额', trigger: 'blur' },
            { type: 'number', min: 0.01, message: '退款金额必须大于0', trigger: 'blur' },
            { 
              validator: (rule, value, callback) => {
                const maxAmount = this.formatPrice(this.refundForm.orderInfo.price)
                if (value > maxAmount) {
                  callback(new Error(`退款金额不能超过订单金额 ￥${maxAmount}`));
                } else {
                  callback();
                }
              },
              trigger: 'blur'
            }
          ],
          refund_type: [
            { required: true, message: '请选择退款类型', trigger: 'change' }
          ],
          refund_reason: [
            { required: true, message: '请选择退款原因', trigger: 'change' }
          ]
        },
        
        // 退款列表对话框
        refundListDialogVisible: false,
        refundListLoading: false,
        refundList: [],
        refundSearchForm: {
          keyword: '',
          status: '',
          date_start: '',
          date_end: ''
        },
        refundDateRange: [],
        refundPagination: {
          page: 1,
          limit: 20,
          total: 0
        },
        
        // 退款详情对话框
        refundDetailDialogVisible: false,
        refundDetailData: null,
        
        // 处理退款对话框
        processRefundDialogVisible: false,
        processSubmitting: false,
        processForm: {
          refund_id: 0,
          refund_sn: '',
          refund_amount: 0,
          status: 1,
          remark: ''
        },
        processRules: {
          status: [
            { required: true, message: '请选择处理结果', trigger: 'change' }
          ],
          remark: [
            {
              validator: (rule, value, callback) => {
                if (this.processForm.status === -1 && !value) {
                  callback(new Error('拒绝退款必须填写原因'));
                } else {
                  callback();
                }
              },
              trigger: 'blur'
            }
          ]
        },

        // ========== 评价相关数据 ==========
        
        // 评价对话框
        reviewDialogVisible: false,
        reviewSubmitting: false,
        reviewForm: {
          orderInfo: {},
          rating: 5,
          environment_rating: 5,
          service_rating: 5,
          value_rating: 5,
          content: '',
          tags: [],
          is_anonymous: false
        },
        reviewRules: {
          rating: [
            { required: true, message: '请给出整体评分', trigger: 'change' }
          ],
          content: [
            { required: true, message: '请填写评价内容', trigger: 'blur' },
            { min: 10, message: '评价内容至少10个字符', trigger: 'blur' }
          ]
        },
        
        // 查看评价对话框
        viewReviewDialogVisible: false,
        reviewDetailData: null
      }
    },
    
    mounted() {
      this.loadOrders()
    },
    
    methods: {
      // 标签切换
      handleTabClick(tab) {
        this.activeTab = tab.name
        this.selectedOrder = null
        this.loadOrders()
      },
      
      // 设置日期筛选
      setDateFilter(filter) {
        this.dateFilter = filter
        this.loadOrders()
      },
      
      // 选择订单
      selectOrder(order) {
        this.selectedOrder = order
      },
      
      // 默认选中第一个订单
      selectFirstOrder() {
        if (this.orderList && this.orderList.length > 0) {
          this.selectedOrder = this.orderList[0]
        } else {
          this.selectedOrder = null
        }
      },
      
      // 保持订单选中状态
      maintainOrderSelection(orderId) {
        if (this.orderList && this.orderList.length > 0) {
          const targetOrder = this.orderList.find(order => order.id === orderId)
          if (targetOrder) {
            this.selectedOrder = targetOrder
          } else {
            // 如果当前订单不在列表中，选择第一个
            this.selectFirstOrder()
          }
        }
      },
      
      // 加载订单列表
      async loadOrders(reset = true) {
        try {
          if (reset) {
            this.loading = true
            this.pagination.page = 1
            this.hasMore = true
          } else {
            this.loadingMore = true
          }
          
          const params = {
            mer_id: this.merId,
            page: this.pagination.page,
            limit: this.pagination.limit
          }
          
          // 根据标签筛选状态
          if (this.activeTab === 'need_process') {
            params.status_in = '0,9,10'  // 待支付 + 待确认 + 异常订单
          } else if (this.activeTab === 'pending') {
            params.status = 0  // 待支付
          } else if (this.activeTab === 'today_checkin') {
            params.booking_date_start = this.formatDate(new Date())
            params.status = 1  // 已支付且今日入住
          } else if (this.activeTab === 'upcoming') {
            params.status = 1  // 已支付
            // 即将入住（今明两天）
            const today = this.formatDate(new Date())
            const tomorrow = new Date()
            tomorrow.setDate(tomorrow.getDate() + 1)
            const tomorrowStr = this.formatDate(tomorrow)
            params.booking_date_range = `${today},${tomorrowStr}`
          } else if (this.activeTab === 'checked_in') {
            params.status_in = '2,5'  // 已入住 + 待退房
          } else if (this.activeTab === 'need_checkout') {
            params.status = 5  // 待退房
          } else if (this.activeTab === 'completed') {
            params.status_in = '4,6'  // 已完成 + 已退房
          } else if (this.activeTab === 'refund_related') {
            params.status_in = '-1,-2'  // 退款中 + 已退款
          } else if (this.activeTab === 'abnormal') {
            params.status_in = '7,8,10'  // 已过期 + 已取消 + 异常订单
          }
          
          // 日期筛选
          if (this.dateFilter === 'today') {
            params.booking_date_start = this.formatDate(new Date())
          } else if (this.dateFilter === 'tomorrow') {
            const tomorrow = new Date()
            tomorrow.setDate(tomorrow.getDate() + 1)
            params.booking_date_start = this.formatDate(tomorrow)
          } else if (this.dateFilter === 'week') {
            params.start_date = this.formatDate(new Date())
            const weekLater = new Date()
            weekLater.setDate(weekLater.getDate() + 7)
            params.end_date = this.formatDate(weekLater)
          }
          
          // 搜索关键词
          if (this.searchForm.keyword) {
            params.keyword = this.searchForm.keyword
          }
          
          // 房型筛选
          if (this.searchForm.roomType) {
            params.room_type = this.searchForm.roomType
          }
          
          // 排序
          if (this.searchForm.sortBy) {
            params.sort = this.searchForm.sortBy
          }
          
          const res = await orderList(params)
          
          if (res.data) {
            const newData = res.data.data || []
            
            if (reset) {
              // 重置列表
              this.orderList = newData
              this.selectFirstOrder()
            } else {
              // 追加数据
              this.orderList = [...this.orderList, ...newData]
            }
            
            this.pagination.total = res.data.total || 0
            
            // 检查是否还有更多数据
            this.hasMore = newData.length >= this.pagination.limit && 
                          this.orderList.length < this.pagination.total
            
            // 提取房型列表
            this.extractRoomTypes()
            
            // 计算统计数据
            this.calculateStats()
          }
          
        } catch (error) {
          console.error('加载订单列表失败:', error)
          this.$message.error('加载数据失败')
        } finally {
          this.loading = false
          this.loadingMore = false
        }
      },

      // 刷新订单列表
      refreshOrders() {
        this.loadOrders(true)
      },

      // 加载更多订单
      async loadMoreOrders() {
        if (this.loadingMore || !this.hasMore) {
          return
        }
        
        this.pagination.page += 1
        await this.loadOrders(false)
      },

      // 滚动事件处理
      handleScroll(event) {
        const container = event.target
        const scrollTop = container.scrollTop
        const scrollHeight = container.scrollHeight
        const clientHeight = container.clientHeight
        
        // 当滚动到接近底部时，自动加载更多
        if (scrollHeight - scrollTop - clientHeight < this.scrollThreshold) {
          this.loadMoreOrders()
        }
      },
      
      // 提取房型列表
      extractRoomTypes() {
        const types = [...new Set(this.orderList.map(item => item.room_title).filter(Boolean))]
        this.roomTypes = types
      },
      
      // 计算统计数据
      calculateStats() {
        this.stats.total = this.orderList.length
        this.stats.pending = this.orderList.filter(item => item.status === 0).length
        this.stats.confirmed = this.orderList.filter(item => item.status === 1).length
        this.stats.checkedIn = this.orderList.filter(item => [2, 5].includes(item.status)).length // 已入住和待退房
        this.stats.completed = this.orderList.filter(item => [4, 6].includes(item.status)).length // 已完成和已退房
        this.stats.refunding = this.orderList.filter(item => item.status === -1).length // 退款中
        this.stats.refunded = this.orderList.filter(item => item.status === -2).length // 已退款
        this.stats.cancelled = this.orderList.filter(item => item.status === 8).length // 已取消
        this.stats.expired = this.orderList.filter(item => item.status === 7).length // 已过期
        this.stats.abnormal = this.orderList.filter(item => item.status === 10).length // 异常订单
        
        // 计算即将入住的订单数（已支付且入住日期在今明两天）
        const today = this.formatDate(new Date())
        const tomorrow = new Date()
        tomorrow.setDate(tomorrow.getDate() + 1)
        const tomorrowStr = this.formatDate(tomorrow)
        
        this.stats.upcoming = this.orderList.filter(item => 
          item.status === 1 && 
          (item.booking_date_start === today || item.booking_date_start === tomorrowStr)
        ).length

        // 计算待处理订单数（待支付 + 待确认 + 异常订单）
        this.stats.needProcess = this.orderList.filter(item => 
          [0, 9, 10].includes(item.status)
        ).length
      },

      // 计算今日入住订单数量
      getTodayCheckinCount() {
        const today = this.formatDate(new Date())
        return this.orderList.filter(item => 
          item.status === 1 && item.booking_date_start === today
        ).length
      },
      
      // 计算天数
      calculateNights(checkIn, checkOut) {
        const start = new Date(checkIn)
        const end = new Date(checkOut)
        const diffTime = Math.abs(end - start)
        const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
        return diffDays
      },
      
      // 打印订单
      printOrders() {
        this.$message.info('打印功能开发中')
      },
      
      // 导出订单
      exportOrders() {
        this.$message.info('导出功能开发中')
      },
      
      // 确认订单
      async confirmOrder(row) {
        try {
          await updateOrderStatus({
            id: row.id,
            status: 1  // 已支付
          })
          this.$message.success('订单已确认')
          await this.loadOrders()
          // 保持当前订单选中状态
          this.maintainOrderSelection(row.id)
        } catch (error) {
          this.$message.error('操作失败')
        }
      },
      
      // 办理入住（核销）
      async checkIn(row) {
        try {
          await updateOrderStatus({
            id: row.id,
            status: 2  // 已核销
          })
          this.$message.success('入住办理成功')
          await this.loadOrders()
          // 保持当前订单选中状态
          this.maintainOrderSelection(row.id)
        } catch (error) {
          this.$message.error('操作失败')
        }
      },
      
      // 办理退房
      async checkOut(row) {
        try {
          await updateOrderStatus({
            id: row.id,
            status: 4  // 已完成
          })
          this.$message.success('退房办理成功')
          await this.loadOrders()
          // 保持当前订单选中状态
          this.maintainOrderSelection(row.id)
        } catch (error) {
          this.$message.error('操作失败')
        }
      },
      
      // 取消订单 - 修改为打开退款对话框
      async cancelOrder(row) {
        this.openRefundDialog(row)
      },
      
      // 查看二维码
      showQrCode(order) {
        if (order.verify_code_img) {
          this.$alert(`<img src="${order.verify_code_img}" style="width: 200px;" />`, '核销二维码', {
            dangerouslyUseHTMLString: true
          })
        } else {
          this.$message.warning('二维码未生成')
        }
      },
      
      // 获取状态类型
      getStatusType(status) {
        const statusMap = {
          0: 'warning',    // 待支付
          1: 'primary',    // 已支付
          2: 'success',    // 已核销(已入住)
          3: 'info',       // 待评价
          4: 'success',    // 已完成
          5: 'warning',    // 待退房
          6: 'info',       // 已退房
          7: 'danger',     // 已过期
          8: 'info',       // 已取消
          9: 'warning',    // 待确认
          10: 'danger',    // 订单异常
          '-1': 'warning', // 退款中
          '-2': 'danger'   // 已退款
        }
        return statusMap[status] || 'info'
      },
      
      // 获取状态文本（结合评价状态）
      getStatusText(status, reviewStatus = 0) {
        const statusMap = {
          0: '待支付',
          1: '已支付',
          2: '已入住',     
          3: reviewStatus === 1 ? '已评价' : '待评价',  // 根据评价状态动态显示
          4: '已完成',
          5: '待退房',     
          6: reviewStatus === 1 ? '已评价' : '待评价',  // 已退房后根据评价状态显示
          7: '已过期',     
          8: '已取消',     
          9: '待确认',     
          10: '订单异常',   
          '-1': '退款中',
          '-2': '已退款'
        }
        return statusMap[status] || '未知状态'
      },

      // 获取评价状态文本
      getReviewStatusText(reviewStatus) {
        return reviewStatus === 1 ? '已评价' : '未评价'
      },

      // 检查是否可以评价
      canReview(order) {
        // 待评价状态且未评价 或 已退房且未评价
        return (order.status === 3 && order.review_status === 0) || 
               (order.status === 6 && order.review_status === 0)
      },

      // 检查是否显示"查看评价"
      canViewReview(order) {
        // 已评价的订单可以查看评价
        return order.review_status === 1
      },
      
      // 格式化日期
      formatDate(date) {
        const year = date.getFullYear()
        const month = String(date.getMonth() + 1).padStart(2, '0')
        const day = String(date.getDate()).padStart(2, '0')
        return `${year}-${month}-${day}`
      },

      // 格式化价格 - 确保为数字类型
      formatPrice(price) {
        if (typeof price === 'number') {
          return price
        }
        if (typeof price === 'string') {
          const parsed = parseFloat(price)
          return isNaN(parsed) ? 0 : parsed
        }
        return 0
      },
      
      // 格式化时间（简短）
      formatTime(timestamp) {
        if (!timestamp) return ''
        
        // 处理不同类型的时间格式
        let date
        if (typeof timestamp === 'string') {
          // 如果是字符串格式的日期时间
          date = new Date(timestamp)
        } else if (typeof timestamp === 'number') {
          // 如果是时间戳，判断是秒还是毫秒
          if (timestamp > 9999999999) {
            // 毫秒时间戳
            date = new Date(timestamp)
          } else {
            // 秒时间戳
            date = new Date(timestamp * 1000)
          }
        } else {
          return ''
        }
        
        // 检查日期是否有效
        if (isNaN(date.getTime())) {
          return ''
        }
        
        return date.toLocaleString('zh-CN', {
          month: '2-digit',
          day: '2-digit',
          hour: '2-digit',
          minute: '2-digit'
        })
      },
      
      // 格式化时间（完整）
      formatDateTime(timestamp) {
        if (!timestamp) return ''
        
        // 处理不同类型的时间格式
        let date
        if (typeof timestamp === 'string') {
          // 如果是字符串格式的日期时间
          date = new Date(timestamp)
        } else if (typeof timestamp === 'number') {
          // 如果是时间戳，判断是秒还是毫秒
          if (timestamp > 9999999999) {
            // 毫秒时间戳
            date = new Date(timestamp)
          } else {
            // 秒时间戳
            date = new Date(timestamp * 1000)
          }
        } else {
          return ''
        }
        
        // 检查日期是否有效
        if (isNaN(date.getTime())) {
          return ''
        }
        
        return date.toLocaleString('zh-CN', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit',
          hour: '2-digit',
          minute: '2-digit'
        })
      },
      
      // 分页大小改变
      handleSizeChange(val) {
        this.pagination.limit = val
        this.pagination.page = 1
        this.selectedOrder = null // 清空当前选中
        this.loadOrders()
      },
      
      // 当前页改变
      handleCurrentChange(val) {
        this.pagination.page = val
        this.selectedOrder = null // 清空当前选中
        this.loadOrders()
      },

      // ================ 退款相关方法 ================

      // 打开退款申请对话框
      openRefundDialog(order) {
        // 验证订单状态
        if (order.status < 0) {
          this.$message.warning('该订单已退款，无法重复申请')
          return
        }
        if (order.status === 0) {
          this.$message.warning('未支付订单不支持退款，请选择取消订单')
          return
        }
        if (![1, 2].includes(order.status)) {
          this.$message.warning('当前订单状态不支持申请退款')
          return
        }

        // 确保价格为数字类型
        const orderPrice = this.formatPrice(order.price)
        
        // 初始化退款表单
        this.refundForm = {
          orderInfo: { 
            ...order,
            price: orderPrice // 确保价格为数字类型
          },
          refund_amount: orderPrice,
          refund_type: 1,
          refund_reason: '',
          refund_detail: ''
        }
        
        this.refundDialogVisible = true
      },

      // 提交退款申请
      async submitRefund() {
        try {
          await this.$refs.refundForm.validate()
          this.refundSubmitting = true

          const refundData = {
            order_id: this.refundForm.orderInfo.id,
            refund_amount: this.refundForm.refund_amount,
            refund_type: this.refundForm.refund_type,
            refund_reason: this.refundForm.refund_reason
          }

          // 如果有详细说明，合并到退款原因中
          if (this.refundForm.refund_detail) {
            refundData.refund_reason += '；' + this.refundForm.refund_detail
          }

          await applyRefund(refundData)
          
          this.$message.success('退款申请提交成功')
          this.refundDialogVisible = false
          
          // 刷新订单列表
          await this.loadOrders()
          this.maintainOrderSelection(this.refundForm.orderInfo.id)

        } catch (error) {
          console.error('退款申请失败:', error)
          this.$message.error(error.message || '退款申请失败')
        } finally {
          this.refundSubmitting = false
        }
      },

      // 显示退款列表
      showRefundList() {
        this.refundListDialogVisible = true
        this.loadRefundList()
      },

      // 加载退款列表
      async loadRefundList() {
        try {
          this.refundListLoading = true
          
          const params = {
            page: this.refundPagination.page,
            limit: this.refundPagination.limit
          }

          // 添加搜索条件
          if (this.refundSearchForm.keyword) {
            params.keyword = this.refundSearchForm.keyword
          }
          if (this.refundSearchForm.status !== '') {
            params.status = this.refundSearchForm.status
          }
          if (this.refundSearchForm.date_start) {
            params.date_start = this.refundSearchForm.date_start
          }
          if (this.refundSearchForm.date_end) {
            params.date_end = this.refundSearchForm.date_end
          }

          const res = await refundList(params)
          
          if (res.data) {
            this.refundList = res.data.list || []
            this.refundPagination.total = res.data.total || 0
          }

        } catch (error) {
          console.error('加载退款列表失败:', error)
          this.$message.error('加载退款列表失败')
        } finally {
          this.refundListLoading = false
        }
      },

      // 退款日期范围改变
      handleRefundDateChange(dates) {
        if (dates && dates.length === 2) {
          this.refundSearchForm.date_start = this.formatDate(dates[0])
          this.refundSearchForm.date_end = this.formatDate(dates[1])
        } else {
          this.refundSearchForm.date_start = ''
          this.refundSearchForm.date_end = ''
        }
      },

      // 退款列表分页大小改变
      handleRefundSizeChange(val) {
        this.refundPagination.limit = val
        this.refundPagination.page = 1
        this.loadRefundList()
      },

      // 退款列表当前页改变
      handleRefundCurrentChange(val) {
        this.refundPagination.page = val
        this.loadRefundList()
      },

      // 查看退款详情
      async viewRefundDetail(refund) {
        try {
          const res = await refundDetail(refund.id)
          if (res.data) {
            this.refundDetailData = res.data
            this.refundDetailDialogVisible = true
          }
        } catch (error) {
          console.error('获取退款详情失败:', error)
          this.$message.error('获取退款详情失败')
        }
      },

      // 打开处理退款对话框
      processRefundDialog(refund) {
        this.processForm = {
          refund_id: refund.id,
          refund_sn: refund.refund_sn,
          refund_amount: refund.refund_amount,
          status: 1,
          remark: ''
        }
        this.processRefundDialogVisible = true
      },

      // 提交处理退款
      async submitProcessRefund() {
        try {
          await this.$refs.processForm.validate()
          this.processSubmitting = true

          await processRefund({
            refund_id: this.processForm.refund_id,
            status: this.processForm.status,
            remark: this.processForm.remark
          })

          const statusText = this.processForm.status === 1 ? '同意' : '拒绝'
          this.$message.success(`退款申请${statusText}成功`)
          
          this.processRefundDialogVisible = false
          
          // 刷新退款列表和订单列表
          this.loadRefundList()
          this.loadOrders()

        } catch (error) {
          console.error('处理退款失败:', error)
          this.$message.error(error.message || '处理退款失败')
        } finally {
          this.processSubmitting = false
        }
      },

      // 获取退款状态类型（用于显示不同颜色的标签）
      getRefundStatusType(status) {
        const statusMap = {
          0: 'warning',   // 待审核
          1: 'primary',   // 已同意
          '-1': 'danger', // 已拒绝
          3: 'success',   // 退款完成
          '-2': 'info'    // 已取消
        }
        return statusMap[status] || 'info'
      },

      // ================ 新增订单状态处理方法 ================

      // 通用更新订单状态方法
      async updateOrderStatus(order, newStatus) {
        try {
          const statusTexts = {
            1: '确认支付',
            2: '办理入住',
            3: '待评价',
            4: '完成订单',
            5: '标记待退房',
            6: '办理退房',
            7: '标记过期',
            8: '取消订单',
            9: '待确认',
            10: '标记异常'
          }

          const actionText = statusTexts[newStatus] || '更新状态'
          
          await this.$confirm(`确定要${actionText}吗？`, '确认操作', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })

          await updateOrderStatus({
            id: order.id,
            status: newStatus
          })

          this.$message.success(`${actionText}成功`)
          await this.loadOrders()
          this.maintainOrderSelection(order.id)

        } catch (error) {
          if (error !== 'cancel') {
            console.error('更新订单状态失败:', error)
            this.$message.error('操作失败')
          }
        }
      },

      // 处理异常订单
      async handleAbnormalOrder(order) {
        try {
          const { value: reason } = await this.$prompt('请说明处理结果:', '处理异常订单', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            inputPattern: /\S/,
            inputErrorMessage: '请输入处理说明'
          })

          // 这里可以调用专门的异常处理接口
          await updateOrderStatus({
            id: order.id,
            status: 1, // 恢复为正常状态
            remark: reason
          })

          this.$message.success('异常订单处理完成')
          await this.loadOrders()
          this.maintainOrderSelection(order.id)

        } catch (error) {
          if (error !== 'cancel') {
            console.error('处理异常订单失败:', error)
            this.$message.error('处理失败')
          }
        }
      },

      // 处理过期订单
      async handleExpiredOrder(order) {
        try {
          const action = await this.$confirm(
            '过期订单处理方式：',
            '处理过期订单',
            {
              distinguishCancelAndClose: true,
              confirmButtonText: '延期处理',
              cancelButtonText: '标记取消',
              type: 'warning'
            }
          )

          if (action === 'confirm') {
            // 延期处理 - 恢复为正常状态
            await updateOrderStatus({
              id: order.id,
              status: 1 // 恢复为已支付状态
            })
            this.$message.success('订单已延期处理')
          } else {
            // 标记取消
            await updateOrderStatus({
              id: order.id,
              status: 8 // 已取消
            })
            this.$message.success('订单已标记为取消')
          }

          await this.loadOrders()
          this.maintainOrderSelection(order.id)

        } catch (error) {
          if (error !== 'cancel') {
            console.error('处理过期订单失败:', error)
            this.$message.error('处理失败')
          }
        }
      },

      // 批量操作方法
      async batchUpdateStatus(orderIds, newStatus) {
        try {
          const statusTexts = {
            1: '确认支付',
            2: '办理入住',
            4: '完成订单',
            5: '标记待退房',
            6: '办理退房',
            8: '取消订单'
          }

          const actionText = statusTexts[newStatus] || '批量更新'
          
          await this.$confirm(`确定要批量${actionText} ${orderIds.length} 个订单吗？`, '批量操作确认', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })

          // 这里需要后端提供批量更新接口
          for (const orderId of orderIds) {
            await updateOrderStatus({
              id: orderId,
              status: newStatus
            })
          }

          this.$message.success(`批量${actionText}成功`)
          await this.loadOrders()

        } catch (error) {
          if (error !== 'cancel') {
            console.error('批量操作失败:', error)
            this.$message.error('批量操作失败')
          }
        }
      },

      // 检查订单是否可以退款
      canRefund(order) {
        // 可退款状态：已支付、已入住（只有付过钱的订单才能退款）
        return [1, 2].includes(order.status)
      },

      // 检查订单是否可以取消
      canCancel(order) {
        // 可取消状态：待支付、待确认
        return [0, 9].includes(order.status)
      },

      // 检查订单是否可以办理入住
      canCheckIn(order) {
        // 已支付状态可以办理入住
        return order.status === 1
      },

      // 检查订单是否可以办理退房
      canCheckOut(order) {
        // 已入住或待退房状态可以办理退房
        return [2, 5].includes(order.status)
      },

      // 获取订单下一步可操作的状态
      getNextActions(order) {
        const actions = []
        
        switch (order.status) {
          case 0: // 待支付
            actions.push({ text: '确认支付', status: 1, type: 'primary' })
            actions.push({ text: '取消订单', status: 8, type: 'info' })
            break
          case 1: // 已支付
            actions.push({ text: '办理入住', status: 2, type: 'success' })
            actions.push({ text: '申请退款', action: 'refund', type: 'danger' })
            break
          case 2: // 已入住
            actions.push({ text: '标记待退房', status: 5, type: 'warning' })
            actions.push({ text: '申请退款', action: 'refund', type: 'danger' })
            break
          case 5: // 待退房
            actions.push({ text: '办理退房', status: 6, type: 'success' })
            break
          case 9: // 待确认
            actions.push({ text: '确认订单', status: 1, type: 'primary' })
            actions.push({ text: '取消订单', status: 8, type: 'info' })
            break
          case 10: // 异常订单
            actions.push({ text: '处理异常', action: 'handle_abnormal', type: 'warning' })
            break
          case 7: // 已过期
            actions.push({ text: '处理过期', action: 'handle_expired', type: 'info' })
            break
        }
        
        return actions
      },

      // 执行订单操作
      async executeOrderAction(order, action) {
        switch (action.action) {
          case 'refund':
            this.openRefundDialog(order)
            break
          case 'handle_abnormal':
            await this.handleAbnormalOrder(order)
            break
          case 'handle_expired':
            await this.handleExpiredOrder(order)
            break
          default:
            if (action.status) {
              await this.updateOrderStatus(order, action.status)
            }
        }
      },

      // ================ 评价相关方法 ================

      // 显示评价对话框
      showReviewDialog(order) {
        this.reviewForm = {
          orderInfo: { ...order },
          rating: 5,
          environment_rating: 5,
          service_rating: 5,
          value_rating: 5,
          content: '',
          tags: [],
          is_anonymous: false
        }
        this.reviewDialogVisible = true
      },

      // 提交评价
      async submitReview() {
        try {
          await this.$refs.reviewForm.validate()
          this.reviewSubmitting = true

          const reviewData = {
            order_id: this.reviewForm.orderInfo.id,
            rating: this.reviewForm.rating,
            environment_rating: this.reviewForm.environment_rating,
            service_rating: this.reviewForm.service_rating,
            value_rating: this.reviewForm.value_rating,
            content: this.reviewForm.content,
            tags: this.reviewForm.tags.join(','),
            is_anonymous: this.reviewForm.is_anonymous ? 1 : 0
          }

          // 这里需要调用评价接口
          // await submitOrderReview(reviewData)

          // 模拟评价成功，更新订单的评价状态
          await updateOrderStatus({
            id: this.reviewForm.orderInfo.id,
            review_status: 1,
            review_time: new Date().toISOString()
          })

          this.$message.success('评价提交成功')
          this.reviewDialogVisible = false
          
          // 刷新订单列表
          await this.loadOrders()
          this.maintainOrderSelection(this.reviewForm.orderInfo.id)

        } catch (error) {
          console.error('提交评价失败:', error)
          this.$message.error(error.message || '提交评价失败')
        } finally {
          this.reviewSubmitting = false
        }
      },

      // 查看评价详情
      async viewReview(order) {
        try {
          // 这里需要调用获取评价详情的接口
          // const res = await getOrderReview(order.id)
          
          // 模拟评价数据
          this.reviewDetailData = {
            rating: 5,
            environment_rating: 5,
            service_rating: 4,
            value_rating: 5,
            content: '房间很干净，服务很好，下次还会选择这里！',
            tags: ['环境优美', '服务周到', '性价比高'],
            review_time: order.review_time || '2024-12-21 15:30:00',
            user_name: order.name,
            is_anonymous: false
          }
          
          this.viewReviewDialogVisible = true
        } catch (error) {
          console.error('获取评价详情失败:', error)
          this.$message.error('获取评价详情失败')
        }
      },

      // 更新订单状态流转逻辑
      getOrderStatusFlow(order) {
        const flows = []
        
        switch (order.status) {
          case 0: // 待支付
            flows.push('确认支付', '取消订单')
            break
          case 1: // 已支付
            flows.push('办理入住', '申请退款')
            break
          case 2: // 已入住
            flows.push('标记待退房', '申请退款')
            break
          case 5: // 待退房
            flows.push('办理退房')
            break
          case 6: // 已退房
            if (order.review_status === 0) {
              flows.push('等待客人评价')
            } else {
              flows.push('订单完成')
            }
            break
          case 3: // 待评价
            if (order.review_status === 0) {
              flows.push('等待客人评价')
            } else {
              flows.push('完成订单')
            }
            break
        }
        
        return flows
      },

      // 更新状态流转逻辑
      async handleOrderStatusChange(order, newStatus) {
        // 特殊状态处理
        if (newStatus === 6) { // 办理退房
          // 退房后自动变为待评价状态
          await this.updateOrderStatus(order, 3)
        } else if (newStatus === 4) { // 完成订单
          // 只有已评价的订单才能完成
          if (order.review_status !== 1) {
            this.$message.warning('请先完成评价再完成订单')
            return
          }
          await this.updateOrderStatus(order, newStatus)
        } else {
          await this.updateOrderStatus(order, newStatus)
        }
      }
    }
  }
  </script>
  
  <style scoped>
  .reservation-container {
    padding: 0;
    background: #f5f7fa;
    min-height: 100vh;
  }
  
  /* 标签导航 */
  .tab-section {
    background: #fff;
    padding: 0 20px;
    border-bottom: 1px solid #e4e7ed;
  }
  
  .tab-badge {
    margin-left: 5px;
  }
  
  /* 搜索区域 */
  .search-section {
    background: #fff;
    padding: 15px 20px;
    border-bottom: 1px solid #e4e7ed;
  }
  
  /* 主内容区域 */
  .main-content {
    padding: 20px;
    height: calc(100vh - 160px);
  }
  
  /* 左侧订单列表 */
  .order-list-section {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  
  .order-filter {
    padding: 15px 20px;
    border-bottom: 1px solid #e4e7ed;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .filter-title {
    font-size: 14px;
    color: #606266;
  }
  
  .order-list {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
  }
  
  .order-item {
    border: 1px solid #e4e7ed;
    border-radius: 6px;
    margin-bottom: 10px;
    padding: 15px;
    cursor: pointer;
    transition: all 0.3s;
    background: #fff;
  }
  
  .order-item:hover {
    border-color: #409eff;
    box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
  }
  
  .order-item.active {
    border-color: #409eff;
    background: #ecf5ff;
  }
  
  .order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
  }
  
  .order-status {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .order-time {
    font-size: 12px;
    color: #909399;
  }
  
  .order-content {
    margin-bottom: 10px;
  }
  
  .room-info {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 5px;
  }
  
  .room-count {
    background: #409eff;
    color: #fff;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 12px;
  }
  
  .room-name {
    font-weight: bold;
    color: #303133;
  }
  
  .date-info, .guest-info {
    font-size: 13px;
    color: #606266;
    margin-bottom: 3px;
  }
  
  .order-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .order-price {
    display: flex;
    align-items: baseline;
    gap: 2px;
  }
  
  .currency {
    font-size: 12px;
    color: #f56c6c;
  }
  
  .amount {
    font-size: 16px;
    font-weight: bold;
    color: #f56c6c;
  }
  
  .quick-actions {
    display: flex;
    gap: 5px;
  }
  
  .empty-state {
    text-align: center;
    padding: 40px 20px;
    color: #909399;
  }
  
  /* 右侧详情区域 */
  .order-detail-section {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    height: 100%;
    overflow-y: auto;
    padding: 20px;
  }
  
  .detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e4e7ed;
  }
  
  .detail-header h3 {
    margin: 0;
    color: #303133;
    font-size: 18px;
  }
  
  .header-tags {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .info-card {
    margin-bottom: 15px;
  }
  
  .info-item {
    display: flex;
    margin-bottom: 8px;
  }
  
  .info-item .label {
    width: 80px;
    color: #606266;
    font-size: 14px;
  }
  
  .info-item .value {
    color: #303133;
    font-weight: 500;
  }
  
  .contact-info {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    color: #409eff;
    font-size: 14px;
  }
  
  .contact-tip {
    font-size: 12px;
    color: #909399;
  }
  
  .room-detail, .survey-detail {
    padding: 10px 0;
  }
  
  .room-row, .survey-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
  }
  
  .room-name {
    flex: 1;
    color: #303133;
  }
  
  .room-count {
    color: #909399;
    font-size: 14px;
  }
  
  .date-info {
    text-align: center;
  }
  
  .date-label {
    font-size: 12px;
    color: #909399;
    margin-bottom: 5px;
  }
  
  .date-value {
    font-size: 16px;
    color: #303133;
    font-weight: bold;
  }
  
  .checkout-info {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #f0f0f0;
    font-size: 13px;
    color: #606266;
  }
  
  .guest-count {
    text-align: center;
    padding: 20px;
  }
  
  .guest-count .count {
    font-size: 24px;
    font-weight: bold;
    color: #409eff;
  }
  
  .price-detail {
    padding: 15px 0;
  }
  
  .price-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 14px;
  }
  
  .price-row .label {
    color: #606266;
  }
  
  .price-row .value {
    color: #303133;
    font-weight: 500;
  }
  
  .total-price {
    text-align: center;
    margin: 15px 0;
    padding-top: 15px;
    border-top: 1px solid #e4e7ed;
  }
  
  .total-price .amount {
    font-size: 28px;
    font-weight: bold;
    color: #f56c6c;
  }
  
  .price-note {
    font-size: 12px;
    color: #909399;
    line-height: 1.5;
    text-align: center;
    margin-top: 10px;
  }
  
  .verify-info {
    padding: 10px 0;
  }
  
  .survey-date, .survey-price, .survey-guest {
    font-size: 14px;
    color: #606266;
  }
  
  .action-buttons {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e4e7ed;
    display: flex;
    gap: 10px;
    justify-content: center;
  }
  
  .empty-detail {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #909399;
  }
  
  .empty-detail i {
    font-size: 48px;
    margin-bottom: 20px;
  }
  
  .empty-detail p {
    font-size: 16px;
    margin: 0;
  }
  
  /* Element UI 样式覆盖 */
  ::v-deep .el-tabs__header {
    margin: 0;
  }
  
  ::v-deep .el-tabs__nav-wrap::after {
    height: 1px;
  }
  
  ::v-deep .el-card__header {
    padding: 15px 20px;
    background: #f8f9fa;
    border-bottom: 1px solid #e4e7ed;
  }
  
  ::v-deep .el-card__body {
    padding: 15px 20px;
  }
  
  ::v-deep .el-button-group .el-button {
    padding: 8px 15px;
  }
  
  ::v-deep .el-badge__content {
    top: 6px;
    right: 8px;
  }

  /* ========== 退款相关样式 ========== */

  /* 退款申请对话框样式 */
  .order-info {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 10px;
  }

  .order-info p {
    margin: 5px 0;
    color: #606266;
  }

  .input-suffix {
    margin-left: 10px;
    color: #909399;
    font-size: 12px;
  }

  .amount-text {
    color: #f56c6c;
    font-weight: bold;
  }

  /* 退款列表样式 */
  .refund-list-header {
    padding: 15px 0;
    border-bottom: 1px solid #e4e7ed;
    margin-bottom: 15px;
  }

  .pagination-wrapper {
    text-align: center;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #e4e7ed;
  }

  /* 退款详情样式 */
  .refund-detail {
    padding: 10px 0;
  }

  .refund-detail h4 {
    margin: 20px 0 10px 0;
    color: #303133;
    font-size: 16px;
  }

  /* 对话框标题样式 */
  ::v-deep .el-dialog__title {
    color: #303133;
    font-weight: 600;
  }

  /* 表单样式 */
  ::v-deep .el-form-item__label {
    color: #606266;
    font-weight: 500;
  }

  /* 描述列表样式 */
  ::v-deep .el-descriptions__title {
    color: #303133;
    font-weight: 600;
    margin-bottom: 15px;
  }

  /* 时间轴样式 */
  ::v-deep .el-timeline-item__timestamp {
    color: #909399;
    font-size: 12px;
  }

  ::v-deep .el-timeline-item__content {
    color: #606266;
  }

  /* 退款状态标签样式优化 */
  .el-tag.el-tag--warning {
    background-color: #fdf6ec;
    border-color: #f5dab1;
    color: #e6a23c;
  }

  .el-tag.el-tag--danger {
    background-color: #fef0f0;
    border-color: #fbc4c4;
    color: #f56c6c;
  }

  .el-tag.el-tag--success {
    background-color: #f0f9ff;
    border-color: #b3d8ff;
    color: #67c23a;
  }

  .el-tag.el-tag--primary {
    background-color: #ecf5ff;
    border-color: #b3d8ff;
    color: #409eff;
  }

  /* 响应式设计 */
  @media (max-width: 768px) {
    .refund-list-header .el-col {
      margin-bottom: 10px;
    }
    
    .refund-list-header .el-input,
    .refund-list-header .el-select {
      width: 100% !important;
    }
  }

  /* ========== 评价相关样式 ========== */

  /* 评价对话框样式 */
  .review-detail {
    padding: 10px 0;
  }

  .review-header {
    margin-bottom: 20px;
  }

  .rating-section {
    text-align: center;
  }

  .overall-rating {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
  }

  .rating-score {
    font-size: 36px;
    font-weight: bold;
    color: #f7ba2a;
    margin-right: 10px;
  }

  .sub-ratings {
    display: flex;
    justify-content: space-around;
    margin-top: 15px;
  }

  .rating-item {
    display: flex;
    align-items: center;
    flex-direction: column;
  }

  .rating-item span {
    margin-bottom: 5px;
    color: #606266;
    font-size: 14px;
  }

  .review-content {
    margin: 20px 0;
  }

  .review-content h4 {
    margin: 15px 0 10px 0;
    color: #303133;
    font-size: 16px;
  }

  .review-content p {
    color: #606266;
    line-height: 1.6;
    margin: 10px 0;
  }

  .review-tags {
    margin: 20px 0;
  }

  .review-tags h4 {
    margin: 15px 0 10px 0;
    color: #303133;
    font-size: 16px;
  }

  .review-meta {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #e4e7ed;
  }

  .review-meta p {
    margin: 8px 0;
    color: #909399;
    font-size: 14px;
  }

  /* 评价表单样式 */
  ::v-deep .el-rate {
    margin: 5px 0;
  }

  ::v-deep .el-rate__text {
    color: #606266;
    margin-left: 10px;
  }

  ::v-deep .el-checkbox-group {
    line-height: 1.8;
  }

  ::v-deep .el-checkbox {
    margin-right: 20px;
    margin-bottom: 10px;
  }

  /* 评价标签样式 */
  .el-tag + .el-tag {
    margin-left: 8px;
  }

  /* 状态标签组合样式 */
  .order-status .el-tag + .el-tag {
    margin-left: 5px;
  }

  /* 评价分数显示 */
  .rating-score {
    font-family: 'Arial', sans-serif;
  }

  /* 评价内容区域 */
  .review-content p {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 6px;
    border-left: 4px solid #409eff;
  }

  /* ========== 无限滚动优化样式 ========== */

  /* 列表头部信息 */
  .list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #f8f9fa;
    border-bottom: 1px solid #ebeef5;
    position: sticky;
    top: 0;
    z-index: 10;
  }

  .list-stats {
    font-size: 12px;
    color: #909399;
  }

  .list-stats .count {
    margin-right: 12px;
    font-weight: 500;
  }

  .list-stats .current {
    color: #409eff;
  }

  .list-actions .el-button {
    padding: 4px 8px;
    font-size: 12px;
  }

  /* 加载更多相关样式 */
  .load-more-trigger,
  .loading-more,
  .no-more {
    text-align: center;
    padding: 15px;
    color: #909399;
    font-size: 13px;
    border-top: 1px solid #f0f0f0;
  }

  .load-more-trigger .el-button {
    color: #409eff;
    border: none;
    background: none;
    padding: 8px 16px;
    border-radius: 4px;
    transition: all 0.3s;
  }

  .load-more-trigger .el-button:hover {
    background: #ecf5ff;
    color: #066fe7;
  }

  .loading-more {
    color: #409eff;
  }

  .loading-more .el-icon-loading {
    margin-right: 5px;
    animation: rotate 2s linear infinite;
  }

  @keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  .no-more {
    color: #c0c4cc;
    font-style: italic;
  }

  /* 空状态优化 */
  .empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #909399;
  }

  .empty-state .el-icon-document {
    font-size: 64px;
    color: #dcdfe6;
    margin-bottom: 16px;
  }

  .empty-state p {
    margin: 16px 0;
    color: #909399;
  }

  /* 滚动条优化 */
  .order-list::-webkit-scrollbar {
    width: 6px;
  }

  .order-list::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
  }

  .order-list::-webkit-scrollbar-thumb {
    background: #c0c4cc;
    border-radius: 3px;
  }

  .order-list::-webkit-scrollbar-thumb:hover {
    background: #a8abb2;
  }

  /* 订单列表高度优化 */
  .order-list {
    height: calc(100vh - 320px);
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
  }

  /* 响应式优化 */
  @media (max-width: 1200px) {
    .order-list {
      height: calc(100vh - 280px);
    }
  }

  @media (max-width: 768px) {
    .order-list {
      height: calc(100vh - 240px);
    }
    
    .list-header {
      padding: 8px 12px;
    }
    
    .list-stats {
      font-size: 11px;
    }
  }
  </style>
  